<template>
    <view class="charts-box">
      <qiun-data-charts 
        type="column"
        :opts="opts"
        :chartData="chartData"
      />
    </view>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { onReady } from '@dcloudio/uni-app';
  
  const chartData = ref({})
  const  opts = ref({
      color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          padding: [15,15,0,5],
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true
          },
          yAxis: {
            data: [
              {
                min: 0
              }
            ]
          },
          extra: {
            column: {
              type: "group",
              width: 30,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08
            }
          }
  })
  
  onReady(() => {
      getServerData(); 
  })
  
  function getServerData(){
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
              categories: ["2018","2019","2020","2021","2022","2023"],
              series: [
                {
                  name: "目标值",
                  data: [35,36,31,33,13,34]
                },
                {
                  name: "完成量",
                  data: [18,27,21,24,6,28]
                }
              ]
            };
          chartData.value = JSON.parse(JSON.stringify(res));
        }, 500);
      }
  </script>
  
  <style scoped>
    /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
    .charts-box {
      width: 100%;
      height: 300px;
    }
  
  </style>